const app = getApp()

// 创建内部audio上下文 InnerAudioContext 对象
const innerAudioContext = wx.createInnerAudioContext()

Page({

  /**
   * 页面的初始数据
   */
  data: {
    audioData: '', // 音频学习详情
    audioList: [], // 音频学习列表
    thisPage: 1, // 当前分页页码
    switchFlag: true, // 音频文件自动续播开关标识（false关闭，true开启）
    audioFlag: false, // 音频文件播放标识（false关闭，true开启）
    changeSlider: false, // 用户是否在拖动滑动条
    autoContinue: true, // 是否正在自动续播（false：否，true：是）
    sliderNow: 0, // slider进度条当前进度（slider进度值必须为Number），用来控制音频文件播放位置
    sliderMax: 100, // slider进度条最大值
    playNow: 0, // 音频文件当前播放时间（单位：秒）
    playTimeNow: '00:00', // 音频文件实时播放时间（分钟：秒数），用于页面显示
    duration: '', // 音频文件的总时长（单位：秒）
    durationTime: '', // 音频文件的总时长（分：秒），用于页面显示
    scale: '', // slider滑动条总长度与音频总时长的比例
    audioNowIndex: '', // 当前音频的下标
    audioLastIndex: '', // 最后一篇音频的下标
    audioPlayLastIndex: '', // 上一个播放的音频的下标
    audio_id: '', // 音频ID
    audioDetails: '', // 音频详情
    playAudio: false, // 音频播放状态（true: 播放，false: 暂停）
    audioPlayFlag: false, // 用户是否点击过音频列表的任意一条音频进行播放（true: 是，false: 否）
    audioListHeight: 0, // 音频列表高度
    synopsisShow: false, // 是否展开简介
    fontSetSize: 'small', // 用户设置的字体大小（'small'：小，'middle'：中，'large'：大）
  },

  /**
   * 展开/关闭简介
   */
  handleSynopsis () {
    let synopsisShow = this.data.synopsisShow
    this.setData({
      synopsisShow: !synopsisShow
    })
  },

  /**
   * 获取音频列表
   */
  getAudioList () {
    let token = wx.getStorageSync('token')
    app.http({
      config: {
        url: '/api/User/audio_info',
        data: {
          token,
          audio_id: this.data.audio_id
        },
        method: 'POST'
      },
      isAuth: true
    }).then(res => {
      console.log(res, 'audioListRes');
      let audioData = res.data.data
      let audioList = res.data.data.audio_article
      let audioLastIndex = audioList.length - 1
      this.setData({
        audioData,
        audioList,
        audioLastIndex
      })
    }).catch(err => {
      console.log(err, 'audioListErr')
    })
  },

  /**
   * 用户点击音频列表的某一个音频，开始播放音频
   */
  handlePlayAudio (e) {
    let that = this
    that.setData({
      audioPlayFlag: true
    })
    let audioNowIndex = e.currentTarget.dataset.index
    // 设置audio的资源地址
    innerAudioContext.src = that.data.audioList[audioNowIndex].article_leader
    let duration = Number(that.data.audioList[audioNowIndex].playtime) // 音频总时长（单位：秒）
    let durationTime = this.timeFormatter(duration) // 音频总时长（分：秒），用于页面显示
    let scale = this.data.sliderMax / duration // slider滑动条总长度与音频总时长的比例
    this.setData({
      audioNowIndex,
      duration,
      durationTime,
      scale,
    }, function () {
      let audioPlayLastIndex = that.data.audioPlayLastIndex
      if (audioPlayLastIndex === '') {
        that.playOrPauseAudio(e)
        that.setData({
          audioPlayLastIndex: audioNowIndex
        })
      } else {
        if (audioPlayLastIndex === audioNowIndex) {
          if (that.data.audioFlag) {
            // 将当前音频文件播放图标为修改为暂停状态
            that.setData({
              audioFlag: false
            })

            // 暂停音频播放
            innerAudioContext.pause()
          } else {
            // 将当前音频文件播放图标为修改为播放状态
            that.setData({
              audioFlag: true
            })

            // 暂停音频播放
            innerAudioContext.play()
          }
        } else {
          this.setData({
            playNow: 0,
            playTimeNow: '00:00',
            audioPlayLastIndex: audioNowIndex
          })
          that.playOrPauseAudio(0)
        }
      }
    })
  },

  /**
   * 用户拖动slider进度条，修改音频文件播放进度
   * @param {slider进度条当前进度值} e 
   */
  handleChangeSlider (e) {
    console.log("用户拖动slider进度条，slider发生change事件，携带值为", e.detail.value)
    let playNow = e.detail.value / this.data.scale // 滑动条当前进度对应的音频播放时间
    let playTimeNow = this.timeFormatter(playNow) // 音频文件实时播放时间（分钟：秒数），用于页面显示
    this.setData({
      sliderNow: e.detail.value,
      playNow,
      playTimeNow,
      changeSlider: true
    })
  },

  /**
   * 用户点击slider进度条，修改音频文件播放进度
   * @param {slider进度条当前进度值} e 
   */
  handleChangeSliderEnd (e) {
    console.log("用户点击slider进度条，slider发生change事件，携带值为", e.detail.value)
    let playNow = e.detail.value / this.data.scale // 滑动条当前进度对应的音频播放时间
    let playTimeNow = this.timeFormatter(playNow) // 音频文件实时播放时间（分钟：秒数），用于页面显示
    this.setData({
      sliderNow: e.detail.value,
      playNow,
      playTimeNow,
      changeSlider: false
    })
    this.playOrPauseAudio(playNow)
  },

  /**
   * 音频播放/暂停
   * @param {音频跳转的位置（单位：秒）} parameter 
   */
  playOrPauseAudio (parameter) {
    let that = this

    console.log(parameter)
    if (that.data.sliderNow < 100) {

      // 判断，当前音频文件播放图标为暂停状态并且用户没有修改slider滑动条进度
      if (!that.data.audioFlag && ((typeof parameter) === 'object')) {

        // 将当前音频文件播放图标为修改为播放状态
        that.setData({
          audioFlag: true
        })

        // 播放音频文件
        innerAudioContext.play()

      } else if (!that.data.audioFlag && ((typeof parameter) === 'number')) { // 判断，当前音频文件播放图标为暂停状态并且用户修改了slider滑动条进度

        // 音频跳转到指定位置
        innerAudioContext.seek(parameter)

      } else if (that.data.audioFlag && ((typeof parameter) === 'number')) { // 判断，当前音频文件播放图标为播放状态并且用户修改了slider滑动条进度

        // 音频跳转到指定位置
        innerAudioContext.seek(parameter)

      } else {

        // 将当前音频文件播放图标为修改为暂停状态
        that.setData({
          audioFlag: false
        })

        // 暂停音频播放
        innerAudioContext.pause()
      }

    } else {

      // 将当前音频文件播放图标为修改为播放状态
      that.setData({
        audioFlag: true
      })

      // 音频跳转到指定位置
      innerAudioContext.seek(0)
    }
  },

  /**
   * 将秒数转换成“分钟：秒数”的格式
   * @param {时间（秒数）} duration 
   */
  timeFormatter(duration) {

    let secondTime = Math.floor(duration); // 秒

    let minuteTime = 0; // 分

    if (secondTime > 60) {

      // 获取分钟，除以60取整数，得到整数分钟
      minuteTime = parseInt(secondTime / 60);

      // 获取秒数，秒数取佘，得到整数秒数
      secondTime = parseInt(secondTime % 60);

    }
    let result = secondTime > 9 ? secondTime : ('0' + secondTime);
    if (minuteTime > 0) {
      result = (minuteTime > 9 ? minuteTime : ('0' + minuteTime)) + ":" + result;
    } else {
      result = "00" + ":" + result;
    }
    return result;
  },

  getSysdata () {
    let that = this
    wx.getSystemInfo({
      success (e) {
        let windowHeight = e.windowHeight
        // 获取元素宽高
        wx.createSelectorQuery().select('.activity-content').boundingClientRect(function (res) {
          let audioListHeight = windowHeight - res.height
          that.setData({
            audioListHeight
          })
        }).exec()
      },
      fail (e) {
        console.log(e)
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let audio_id = options.audio_id
    this.setData({
      audio_id
    })
    this.getAudioList()
    this.getSysdata()

    // 监听音频播放事件
    innerAudioContext.onPlay(() => {
      this.setData({
        audioFlag: true
      })
    })

    innerAudioContext.onTimeUpdate(() => {
      // 判断，用户是否在拖动进度条准备改变音频播放进度，如果是，则进度条的实时进度更新功能暂停，如果不是，则实时更新进度条进度
      if (!this.data.changeSlider) {

        // 当前音频的播放位置（单位 s）
        let currentTime = innerAudioContext.currentTime
  
        // 当前音频的播放位置（单位：秒）
        let playNow = Math.round(currentTime)
  
        // 当前音频的播放时间（分：秒），用于页面显示
        let playTimeNow = this.timeFormatter(currentTime)
  
        // 让滑动条跟随音频播放进度滑动
        let sliderNow = Math.round(playNow * this.data.scale)
  
        this.setData({
          playNow,
          playTimeNow,
          sliderNow
        })
      }
    })

    // 监听，音频完成跳转
    innerAudioContext.onSeeked(() => {
      // 判断，音频播放图标是暂停状态，完成跳转后要调用pause()暂停音频播放，不然音频完成跳转后会自动播放
      if (!this.data.audioFlag && ((typeof this.data.playNow) === 'number')) {

        // 暂停音频播放
        innerAudioContext.pause()
      } else { // 判断，音频播放图标是播放状态，完成跳转后继续播放

        /**
         * 这里要先调用pause()暂停音频播放，然后用计时器延迟一点时间再播放，不然onTimeUpdate()回调会不执行（小程序API的bug），就无法监听音频的播放进度了
         */
        // 暂停音频播放
        innerAudioContext.pause()

        setTimeout(() => {
          // 播放音频文件
          innerAudioContext.play()
        }, 100)
      }
    })

    // 监听，音频播放结束
    innerAudioContext.onEnded((res) => {

      let audioNowIndex = this.data.audioNowIndex
      let audioLastIndex = this.data.audioLastIndex
      console.log('audioNowIndex', audioNowIndex)
      console.log('audioLastIndex', audioLastIndex)
      if (audioNowIndex < audioLastIndex) {
        // 设置audio的资源地址
        innerAudioContext.src = this.data.audioList[audioNowIndex + 1].article_leader
        let duration = Number(this.data.audioList[audioNowIndex + 1].playtime) // 音频总时长（单位：秒）
        let durationTime = this.timeFormatter(duration) // 音频总时长（分：秒），用于页面显示
        let scale = this.data.sliderMax / duration // slider滑动条总长度与音频总时长的比例
        this.setData({
          duration,
          durationTime,
          scale,
        }, function () {
          let audioNowIndex = this.data.audioNowIndex + 1
          this.setData({
            audioNowIndex,
            audioPlayLastIndex: audioNowIndex,
            playNow: 0,
            playTimeNow: '00:00'
          })
          console.log(this.data.audioNowIndex)
          this.playOrPauseAudio(0)
        })
      } else {
        // 设置audio的资源地址
        innerAudioContext.src = this.data.audioList[0].article_leader
        let duration = Number(this.data.audioList[0].playtime) // 音频总时长（单位：秒）
        let durationTime = this.timeFormatter(duration) // 音频总时长（分：秒），用于页面显示
        let scale = this.data.sliderMax / duration // slider滑动条总长度与音频总时长的比例
        this.setData({
          duration,
          durationTime,
          scale,
        }, function () {
          this.setData({
            audioNowIndex: 0,
            audioPlayLastIndex: 0,
            playNow: 0,
            playTimeNow: '00:00'
          })
          this.playOrPauseAudio(0)
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let fontSetSize = wx.getStorageSync('fontSetSize') // 本地缓存中用户设置的字体大小
    if (fontSetSize) {
      this.setData({
        fontSetSize
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})